<template>
    <div 
        @click="jumpDetails"
    class="pic-info">
        <div class="img-box">
            <img :src="imgUrl" alt="">
        </div>
        <div class="title-box">
            <p>{{title}}</p>
        </div>
        <div class="author-box">
            <p>{{author}}</p>
        </div>
        <div class="text-box">
            <span>{{text}}</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        imgUrl:{
            type: String,
        },
        title:{
            type: String,
        },
        author:{
            type: String,
        },
        text: {
            type: String,
        }
    },
    data(){
        return {
            infoObj: {imgUrl:this.imgUrl, title:this.title, author:this.author, text:this.text,},
            flag: true,
        }
    },
    name: "Picinfo",
    methods:{
        jumpDetails(){
            this.$emit("setData",{infoObj:this.infoObj,flag:this.flag})
        }
    }
}
</script>

<style lang="scss" scoped>
.pic-info{
    width: 100%;
    .img-box{
        font-size: 0;
        img{
            width: 100%;
            border-radius: 8px;
        }
    }
    .title-box{
        p{
            font-size: 18px;
            padding: 10px 0 5px 0;
        }
    }
    .author-box{
        p{
            font-size: 16px;
            color: #666;
            padding-bottom: 5px;
        }
    }
    .text-box{
        font-size: 0;
        span{
            color: #888;
            font-size: 14px;
        }
    }
}
</style>